<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: chocolate;
      margin-bottom: 10px;
    }
    .demo-1 .cell {
      width: 100px;
      height: 100px;
      background-color: crimson;
    }
    .demo-1:hover .cell {
      animation: move 2s linear;
    }
    .demo-2 .cell {
      width: 100px;
      height: 100px;
      background-color: crimson;
    }
    .demo-2:hover .cell {
      /* animation: move 2s linear infinite reverse; */
      /* animation: move 2s linear infinite alternate; */
      animation: move 2s linear 2 reverse forwards;
    }
    @keyframes move {
      100% {
        transform: translateX(200px);
      }
    }
    .demo-3 .cell {
      width: 100px;
      height: 100px;
      background-color:cyan;
      border-radius: 50%;
    }
    .demo-3:hover .cell {
      /* animation: jump 1s ease-in infinite alternate; */
      animation: jump 1s cubic-bezier(0.41, -0.04, 0.93, 0.29) infinite alternate;
    }
    @keyframes jump {
      0% {
        transform: translateY(0);
      }
      /* 停一下 */
      90% {
        transform: translateY(200px);
        clip-path: eallipse(50% 50% at 50% 50%)
      }
      100% {
        transform: translateY(210px);
        clip-path: ellipse(50% 45% at 50% 48%)
      }
    }
    .demo-4 {
      background: #0c1937;
      overflow: hidden;
    }
    .demo-4 img {
      width: 100%;
      height: 100%;
      animation: loading 2s steps(12) 5;
    }
    @keyframes loading {
      100% {
        transform: rotate(360deg);
      }
    }
    .demo-5 {
      width: 106px;
      height: 113px;
      background: url('../images/tuzi.png') no-repeat;
      animation: stepX 1s steps(12) infinite;
    }
    @keyframes stepX {
      100% {
        background-position-x: -1290px;
      }
    }
  </style>
</head>
<body>
  <div class="box demo-1">
    <div class="cell"></div>
  </div>
  <div class="box demo-2">
    <div class="cell"></div>
  </div>
  <div class="box demo-3">
    <div class="cell"></div>
  </div>
  <div class="box demo-4 loading">
    <img src="../images/loading.png" alt="">
  </div>
  <div class="demo-5">
  </div>
  <script>
    let runstart = () => {console.log('animationstart')}
    let runend = () => {console.log('animationend')}
    let runiteration = () => {console.log('animationiteration')}
    
    let $loading = document.querySelector('.loading')
    $loading.addEventListener('animationstart', runstart)
    $loading.addEventListener('animationend', runend)
    $loading.addEventListener('animationiteration', runiteration)
  </script>
</body>
</html>